<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<title>速用科技</title>
<meta name="keywords" content="速用科技管理系统">
<meta name="description" content="速用科技管理系统">
<!-- Favicon -->
<link rel="icon" href="/img/favicon.png">
<link rel="apple-touch-icon" href="/img/apple-touch-icon.png">
<link href="/css/bootstrap.min.css" rel="stylesheet">
<link href="/css/font-awesome.css?v=4.4.0" rel="stylesheet">
<link href="/css/animate.css" rel="stylesheet">
<link href="/css/style.css" rel="stylesheet">
<link href="/css/inviteRegister.css" rel="stylesheet">
<!-- 自定义css开始 -->
<style type="text/css">
/*消除google浏览器黄色框 */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus
	{
	box-shadow: 0 0 0 60px #eee inset;
	-webkit-text-fill-color: #878787;
}

/* .footer-18q {
  	position: absolute;
  	left:30%;
	bottom: 25px;
	font-size: 12px;
	font-family: white;

}

.footer-18q > * {
	margin-right: 15px;
	color: hsla(0,0%,100%,.5);
	

} */

/* Footer */
#footer {
	padding: 4em 0 2em 0;
	text-align: center;
}

#footer .copyright {
	color: rgba(255, 255, 255, 0.5);
	font-size: 0.9em;
	margin: 0 0 2em 0;
	padding: 0;
}
}
</style>


<script>
        if (window.top !== window.self) {
            window.top.location = window.location;
        }//这段代码可以防止自己的网页被别人用iframe的方式嵌入到其它网页中去
        
        
    </script>


</head>

<body class="signin">
	<div class="signinpanel">

		<form id="registerForm">


			<h3 class="text-center">加入速用，感受科技的魅力</h3>
			<p class="m-t-md text-center">欢迎注册速用科技后台管理系统</p>

			<div>用户名</div>
			<input type="text" id="companyName" name="companyName"
				class="form-control" placeholder="请输入(公司/个体户/个人)有效的名称" />
			<div>手机号码</div>
			<input type="text" name="phone" id="phone" class="form-control"
				placeholder="请输入手机号码" />
			<div>手机验证码</div>
			<div class="row">
				<div class="col-xs-6">
					<input type="text" name="code" id="code" class="form-control"
						placeholder="验证码">
				</div>
				<div class="col-xs-6">
					<input type="button" name="btnVerifyCode" style="margin-top: 0px"
						class="btn btn-block btn-flat" onclick="getSMS(this)"
						value="获取验证码">
				</div>

			</div>
			<div>密码</div>
			<input id="password" type="password" name="password"
				class="form-control" placeholder="请输入密码" />
			<div>推荐码</div>
			<input type="text" name="inviteCode" id="inviteCode"
				class="form-control" placeholder="选填" th:value="${code}"
				readonly="readonly" />
			<button id="login" class="btn btn-login btn-block" type="submit">注册</button>

			<!--按钮模块-->
			<div class="outside-login">
				<div class="outside-login-tit"></div>
				<a href="/login">已有账号？点我登录</a>
			</div>
		</form>
	</div>


	<!--    <div class="footer-18q">
     <span>Copyright&nbsp;&nbsp;©&nbsp;2018&nbsp; 速用科技&nbsp;&nbsp;</span>
     <span>联系人：(叶先生)15217628168</span>
     <span>地址：广州市花都区莲塘商务大厦 816室</span>
     <span>粤ICP备17075092号</span>
 </div> -->

	<!-- Footer -->
	<footer id="footer">
		<div class="copyright">Copyright©2018速用科技.联系人：(叶先生)15217628168.地址：广州市花都区莲塘商务大厦
			816室.粤ICP备17075092号</div>
	</footer>



	<script th:inline="javascript"> var ctx = [[@{/}]] ; </script>
	<!-- 全局js -->
	<script src="/js/jquery.min.js?v=2.1.4"
		th:src="@{/js/jquery.min.js?v=2.1.4}"></script>
	<script src="/js/bootstrap.min.js?v=3.3.6"
		th:src="@{/js/bootstrap.min.js?v=3.3.6}"></script>

	<!-- 自定义js -->
	<!-- 	<script src="/js/content.js?v=1.0.0" th:src="@{/js/content.js?v=1.0.0}"></script> -->

	<!-- jQuery Validation plugin javascript-->
	<script src="/js/ajax-util.js"></script>
	<script src="/js/plugins/validate/jquery.validate.min.js"
		th:src="@{/js/plugins/validate/jquery.validate.min.js}"></script>
	<script src="/js/plugins/validate/messages_zh.min.js"
		th:src="@{/js/plugins/validate/messages_zh.min.js}"></script>
	<script src="/js/plugins/layer/layer.min.js"
		th:src="@{/js/plugins/layer/layer.min.js}"></script>


	<script type="text/javascript">
	$().ready(function() {
		validateRule();
		
	});
	$.validator.setDefaults({
		submitHandler : function() {
			register();
		}
	});
	
	function register() {


		$.ajax({
			type : "GET",
			url : ctx + "register2",
			data : $('#registerForm').serialize(),// 你的formid
			async : false,
			success : function(r) {
				if (r.code == 0) {
					layer.msg(r.msg+"即将跳转登陆界面");
					document.getElementById("login").disabled=true;
					setTimeout(function() {

						parent.location.href = '/login';

					}, 4000);

				}else{
					layer.msg(r.msg);
					return;
				}

			},
		});

	}

    function validateRule() {
        var icon = "<i class='fa fa-times-circle'></i> ";
        jQuery.validator.addMethod("isphone", function(value, element) {  
    	    var length = value.length;  
    	    var phone = /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})$/;  
    	    return this.optional(element) || (length == 11 && phone.test(value));  
    	}, "请正确填写您的手机号码"); 
        $("#registerForm").validate({
            rules: {
                companyName: {
                    required: true,
                	remote : {
    					url : "/sys/user/exit", // 后台处理程序
    					type : "post", // 数据发送方式
    					dataType : "json", // 接受数据格式
    					data : { // 要传递的数据
    						companyName : function() {
    							return $("#companyName").val();
    						}
    					}
    				}
                },
                password: {
                    required: true,
                    minlength: 6,
                    
                },
                phone : {
    				required : true,
    				isphone : true,
    				remote : {
    					url : "/sys/user/exit", // 后台处理程序
    					type : "post", // 数据发送方式
    					dataType : "json", // 接受数据格式
    					data : { // 要传递的数据
    						phone : function() {
    							return $("#phone").val();
    						}
    					}
    				}
    			},
                inviteCode:{
                	required: true
                }
             
            },
            messages: {
                companyName: {
                    required: icon + "请输入您的用户名",
                    remote : icon + "用户名已经存在"
                
                },
                password: {
                    required: icon + "请输入您的密码",
                    minlength: "密码不能小于6个字符"
                },
            	phone : {
    				required : icon + "请输入手机号码",
    				remote : icon + "手机号已经存在",
    				isphone:icon + "请输入正确的手机号码"
    			},
                code:{
                	 required: icon + "请输入验证码"
                }
            
            }
        })
    }
    
    
    
    /**
     * 获取验证码
     * 
     * @param that
     */
    function getSMS(that) {
    	var myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
    	var phone = $('#phone').val();
    	if (phone == null || phone == "") {
    		layer.msg("手机号码不能为空");
    		return;
    	}
    	if (!myreg.test(phone)) {
    		layer.msg("请输入正确的手机号码");
    		return;
    	}
    	$.ajax({
    		type : "POST",
    		url : "/sendMsgRes",
    		data : {
    			'phone' : phone 
    		},
    		success : function(r) {
    			if (r.code == 500) {
    				layer.msg(r.msg);
    				return;
    			} else {
    				setButtonStatus(that);
    				layer.msg(r.msg);
    			}

    		},
    	});

    }
  
    
    
 // 设置按钮状态开始
    var wait = 120;
    function setButtonStatus(that) {
    	if (wait == 0) {
    		that.removeAttribute("disabled");
    		that.value = "免费获取验证码";
    		wait = 60;
    	} else {
    		that.setAttribute("disabled", true);
    		that.value = wait + "秒后可以重新发送";
    		wait--;
    		setTimeout(function() {
    			setButtonStatus(that)
    		}, 1000)
    	}
    }
    
</script>
</body>
</html>
